import cs from 'classnames'
import { throttle } from 'lodash'
import Image from 'next/image'
import Script from 'next/script'
import { useContext, useEffect, useRef, useState } from 'react'
import { useParallax } from 'react-scroll-parallax'

import banner from '@/assets/images/banner.png'
import banner1 from '@/assets/images/banner1.png'
import banner2 from '@/assets/images/banner2.png'
import banner3 from '@/assets/images/banner3.png'
// import last from '@/assets/images/last.png'
import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'

import locale from './locale/index'
import styles from './style/index.module.less'

function Home({ onSubmit }: { onSubmit: (_: boolean) => void }) {
  const t = useLocale(locale)

  const [innerWidth, setInnerWidth] = useState<number>(0)

  const [show, setShow] = useState<boolean>(false)

  const [innerHeight, setInnerHeight] = useState<number>(0)

  // 设置字体大小
  const baseSize = useRef(16)
  useEffect(() => {
    const basesize = 16
    // 在这里执行只在客户端执行的代码
    setShow(true)
    const handleResize = () => {
      const w = window.innerWidth

      if (w <= 1440) {
        setInnerWidth(w * 0.15)
      } else {
        setInnerWidth(50 + (w - 1440) / 2)
      }

      const h = window.innerHeight
      setInnerHeight(h)
      // 处理窗口变化的逻辑
      console.log('窗口发生变化')
      if (document.documentElement.clientWidth < 1440) {
        const scale = document.documentElement.clientWidth / 1440
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = basesize * Math.min(scale, 2) + 'px'
        baseSize.current = basesize * Math.min(scale, 2)
      } else {
        document.documentElement.style.fontSize = basesize + 'px'
        baseSize.current = basesize
      }
    }
    handleResize()
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
      document.documentElement.style.fontSize = basesize + 'px'
      baseSize.current = basesize
    }
  }, [])

  //阻尼效果
  useEffect(() => {
    const handleScrollEnd = throttle(() => {
      const y = window.scrollY
      const h = window.innerHeight

      const descRef: any = window.document.querySelector('.descRef')

      if (descRef) {
        if (y > h * 0.5) {
          descRef.style.opacity = 1
        } else {
          descRef.style.opacity = 0
        }
      }

      const descRef1: any = window.document.querySelector('.descRef1')
      if (descRef1) {
        if (y > h * 1) {
          descRef1.style.opacity = 1
        } else {
          descRef1.style.opacity = 0
        }
      }

      const maskRefs: any = window.document.querySelector('.maskRefs')
      if (maskRefs) {
        if (y > h * 1.5) {
          maskRefs.style.opacity = 1
        } else {
          maskRefs.style.opacity = 0
        }
      }

      if (y >= h * 2) {
        ;(document.querySelector('html') as HTMLElement).style.scrollSnapType = 'y mandatory'
      } else {
        ;(document.querySelector('html') as HTMLElement).style.scrollSnapType = 'none'
      }
    }, 200)
    window.addEventListener('scroll', handleScrollEnd)

    return () => {
      window.document.removeEventListener('scroll', handleScrollEnd)
      ;(document.querySelector('html') as HTMLElement).style.scrollSnapType = 'none'
    }
  }, [])

  // 鼠标点击事件
  const scrollTop = () => {
    const scrollPosition = window.scrollY || window.pageYOffset
    const top = scrollPosition < innerHeight ? innerHeight * 2 : innerHeight * 3
    window.scrollTo({
      top: top,
      left: 0,
      behavior: 'smooth', // 可选：平滑滚动
    })
  }

  const { lang } = useContext(GlobalContext)

  /* ------------第一部分-------------- */

  const bannerRef = useParallax<HTMLDivElement>({
    startScroll: 0,
    endScroll: innerHeight * 1.25,
    scale: [1, 5, 'easeInQuad'],
  })

  const logoRef = useParallax<HTMLDivElement>({
    startScroll: 0,
    endScroll: innerHeight * 0.5,
    translateY: [`${innerHeight * 0.8}px`, `${innerHeight * 0.3}px`],
  })

  const descRef = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 0.5,
    endScroll: innerHeight * 1,
    translateY: [`${innerHeight * 1}px`, `${innerHeight * 0.3}px`],
  })

  const descRef1 = useParallax<HTMLDivElement>({
    startScroll: innerHeight,
    endScroll: innerHeight * 1.5,
    translateY: [`${innerHeight * 1}px`, `${innerHeight * 0.3}px`],
  })

  const maskOption = {
    startScroll: innerHeight * 1.5,
    endScroll: innerHeight * 1.75,
  }

  const maskRef = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef1 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef2 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef3 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef4 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef5 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef6 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef7 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef8 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })
  const maskRef9 = useParallax<HTMLDivElement>({
    ...maskOption,
    opacity: [0, 1],
  })

  const mouseRef = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 2,
    endScroll: innerHeight * 3,
    opacity: [1, 0],
  })

  /* ------------第二部分-------------- */
  const imgRef = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 3,
    endScroll: innerHeight * 5,
    translateY: [`0px`, `-${baseSize.current * 34.43 * 2}px`],
  })
  const titleRef = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 3,
    endScroll: innerHeight * 5,
    translateY: [`0px`, `-${innerHeight * 0.41}px`],
  })

  const secondsSescRef = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 3,
    endScroll: innerHeight * 3.5,
    opacity: [1, 0],
  })

  const secondsSescRef1t = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 3.5,
    endScroll: innerHeight * 4,
    opacity: [0, 1],
  })
  const secondsSescRef1 = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 4,
    endScroll: innerHeight * 4.5,
    opacity: [1, 0],
  })

  const secondsSescRef2t = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 4.5,
    endScroll: innerHeight * 5,
    opacity: [0, 1],
  })
  /* --------------------------------- */

  /*最后部分*/

  const lastImgRef = useParallax<HTMLDivElement>({
    startScroll: innerHeight * 5,
    endScroll: innerHeight * 6.4,
    scale: [2, 1],
  })

  return (
    <>
      <Script
        id="stripe-js"
        src="/wow.js"
        onLoad={() => {
          new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 20,
            mobile: true,
            live: true,
            callback: null,
            scrollContainer: null,
          }).init()
        }}
      />

      {/* 第一部分  滑动占两屏*/}
      <div className={cs('h-[300vh] w-full relative snap-start')}>
        <div className=" absolute w-full h-full top-0 left-0">
          <div className="sticky top-0">
            <div className=" relative h-screen ">
              {/* 蒙板 */}
              <div className="z-20 absolute  overflow-hidden w-full h-full">
                <div className=" relative w-full h-full">
                  <div
                    ref={bannerRef.ref}
                    className={cs(styles['banner'], ' absolute overflow-hidden z-30')}
                    style={{
                      [lang === 'en-US' ? 'right' : 'left']: `0px`,
                      width: innerHeight * 0.65 + 'px',
                      height: innerHeight * 0.65 + 'px',
                      borderRadius: '9999px',
                      top: innerHeight * 0.15 + 'px',
                      [lang === 'en-US' ? 'right' : 'left']: innerWidth + 'px',
                    }}
                  ></div>
                </div>
                {/* 图片 */}
                {show && (
                  <Image
                    className={cs(
                      lang === 'en-US' ? '' : styles['banner-img'],
                      'w-full h-screen absolute z-10 top-0 left-0 object-cover '
                    )}
                    src={banner}
                    alt="icon"
                    priority
                  />
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="h-screen sticky top-0  w-full z-10 px-[7.5rem] max-w-[1440px] right-0 mx-auto">
          {/* logo */}
          <div className={cs(styles['banner-logo'])} ref={logoRef.ref}>
            <div className={cs('w-full ', show ? 'opacity-100' : 'opacity-0')}>
              <Image
                className=""
                src="/logo.svg"
                alt="logo Logo"
                width={196}
                height={79}
                priority
              />
            </div>
          </div>
          {/* 文字 */}
          <div className=" w-[29.56rem]  py-4  translate-y-[100vh] " ref={descRef.ref}>
            <span className="descRef opacity-0 font-bold text-[2.6rem] text-black Roboto">
              {t['banner-text']}
            </span>
          </div>
          <div className=" w-[29.56rem] translate-y-[100vh] " ref={descRef1.ref}>
            <span
              className={cs(
                'descRef1  font-[350]  opacity-0  text-[1.125rem] leading-normal Avenir',
                styles['descRef1']
              )}
            >
              {t['banner-desc']}
            </span>
          </div>
        </div>

        {/* 蒙板 */}
        <div className="maskRefs absolute w-full h-full top-0 left-0 opacity-0">
          <div className={cs('flex h-full relative w-[45.2%]', styles['mask-list'])}>
            <div className={cs(styles['item'], 'left-0')} ref={maskRef.ref}></div>
            <div className={cs(styles['item'], 'left-[4.52%]')} ref={maskRef1.ref}></div>
            <div className={cs(styles['item'], 'left-[9.04%]')} ref={maskRef2.ref}></div>
            <div className={cs(styles['item'], 'left-[13.56%]')} ref={maskRef3.ref}></div>
            <div className={cs(styles['item'], 'left-[18.08%]')} ref={maskRef4.ref}></div>
            <div className={cs(styles['item'], 'left-[22.6%]')} ref={maskRef5.ref}></div>
            <div className={cs(styles['item'], ' left-[27.12%]')} ref={maskRef6.ref}></div>
            <div className={cs(styles['item'], 'left-[31.64%]')} ref={maskRef7.ref}></div>
            <div className={cs(styles['item'], 'left-[36.16%]')} ref={maskRef8.ref}></div>
            <div className={cs(styles['item'], ' left-[40.68%]')} ref={maskRef9.ref}></div>
          </div>
        </div>
        {/* 鼠标 */}
        <div
          className={cs(
            'fixed flex flex-col items-center justify-end h-screen top-0 z-20 pb-[13vh]',
            lang === 'en-US' ? 'right-[3.875rem] ' : 'left-[3.875rem] '
          )}
          ref={mouseRef.ref}
          onClick={scrollTop}
        >
          <div className="cursor-pointer flex flex-col items-center">
            <div className={cs('Tajawal text-[#99A2A3] text-[0.875rem]', styles['mouse'])}>
              {t['mouse-text']}
            </div>
            <div className={styles['mousey']}>
              <div className={styles['scroller']}></div>
            </div>
          </div>
        </div>
      </div>
      {/* 第二部分 */}
      <div className="w-full h-[300vh] flex justify-between px-[6rem] relative max-w-[1440px] mx-auto">
        {/* 标题 */}

        <div
          className={cs(
            'absolute top-0  w-[22.999rem] z-30  h-[300vh]',
            lang === 'en-US' ? 'left-[2.5rem]' : 'right-[2.5rem]'
          )}
        >
          <div className={cs('sticky top-0 pt-[64vh] h-[100vh]')}>
            <div
              className={cs('wow fadeInUp', 'text-[4.375rem] font-bold  Roboto ', styles['title'])}
              ref={titleRef.ref}
            >
              {t['banner1-title']}
            </div>
          </div>
        </div>

        {/* 图片 */}
        <div className="h-full">
          <div className="h-screen flex items-center sticky top-0">
            <div className="w-[34.43rem] h-[34.43rem] bg-black rounded-full overflow-hidden">
              <div ref={imgRef.ref} className="flex flex-col">
                <Image
                  src={banner1}
                  alt="logo Logo"
                  className="w-[34.43rem] h-[34.43rem]"
                  priority
                />
                <Image
                  src={banner2}
                  alt="logo Logo"
                  className="w-[34.43rem] h-[34.43rem]"
                  priority
                />
                <Image
                  src={banner3}
                  alt="logo Logo"
                  className="w-[34.43rem] h-[34.43rem]"
                  priority
                />
              </div>
            </div>
          </div>
        </div>
        {/* 描述 */}
        <div className="container">
          {/* 第一部分 */}
          <div className={cs('snap-start  flex justify-end px-[4rem]')}>
            <div className=" h-screen flex items-center">
              <div className="wow slideInUp w-full" ref={secondsSescRef.ref}>
                <div className="Roboto font-bold text-[2rem] text-black leading-tight">
                  {t['banner1-text']}
                </div>
                <div className=" Avenir font-[350] text-[1.125rem] text-[#848484] pt-3  leading-normal">
                  - {t['banner1-desc']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner1-desc1']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner1-desc2']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner1-desc3']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner1-desc4']}
                </div>
                {lang === 'en-US' && (
                  <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                    - {t['banner1-desc5']}
                  </div>
                )}
              </div>
            </div>
          </div>
          {/* 第二部分 */}
          <div className={cs('snap-start flex justify-end px-[4rem]')}>
            <div className=" h-screen flex items-center" ref={secondsSescRef1t.ref}>
              <div className="w-full" ref={secondsSescRef1.ref}>
                <div className="Roboto font-bold  text-[2rem] text-black leading-tight">
                  {t['banner2-text']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] pt-3  leading-normal">
                  - {t['banner2-desc']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner2-desc1']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner2-desc2']}
                </div>
              </div>
            </div>
          </div>
          {/* 第三部分 */}
          <div className={cs('snap-start  flex justify-end px-[4rem]')}>
            <div className=" h-screen flex items-center" ref={secondsSescRef2t.ref}>
              <div className="w-full">
                <div className="Roboto font-bold text-[2rem] text-black leading-tight">
                  {t['banner3-text']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] pt-3  leading-normal">
                  {t['banner3-desc']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc1']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc2']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc3']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc4']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc5']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc6']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc7']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc8']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc9']}
                </div>
                <div className="Avenir font-[350] text-[1.125rem] text-[#848484] leading-normal">
                  - {t['banner3-desc10']}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* 尾部 */}
      <div className=" h-[65vh] w-full relative">
        <div className="absolute top-0 left-0 w-full overflow-x-hidden h-[95vh]">
          <div ref={lastImgRef.ref} className={cs(styles['last-img'], 'w-full h-full')}>
            {/* <Image src={last} alt="logo Logo" className={cs('w-screen h-auto')} /> */}
          </div>
        </div>
      </div>
      <div className="h-[100vh] overflow-hidden w-full snap-start">
        {/* 文字 */}
        <div className="flex justify-center items-center flex-col h-[100vh] w-full   overflow-hidden  relative">
          <div className="wow fadeInUp w-[50rem] Roboto font-bold text-[5rem] text-center">
            {t['last-text']}
          </div>
          <div
            className="wow fadeInUp w-[31.25rem] text-center leading-normal pt-2 text-[#848484]"
            data-wow-delay="0.1s"
          >
            {t['last-desc']}
          </div>
          <div className={cs('wow fadeInUp ')} data-wow-delay="0.2s">
            <button
              className={cs(styles['button'], ' relative')}
              onClick={() => {
                onSubmit(true)
              }}
            >
              <div className={cs(styles['button-bg'])}></div>
              <div className=" absolute left-0 top-0 w-full h-full flex items-center justify-center z-20 Roboto">
                {t['button']}
                <Image
                  className={cs(
                    styles['button-arrow'],
                    'mx-2',
                    lang === 'en-US' ? '' : styles['rtl-img']
                  )}
                  src="/arrow.svg"
                  alt="logo Logo"
                  width={16}
                  height={16}
                  priority
                />
                <Image
                  className={cs(
                    styles['button-arrow1'],
                    'mx-2',
                    lang === 'en-US' ? '' : styles['rtl-img']
                  )}
                  src="/arrow1.svg"
                  alt="logo Logo"
                  width={16}
                  height={16}
                  priority
                />
              </div>
            </button>
          </div>
        </div>
      </div>
      <div className="w-full h-4"></div>
    </>
  )
}
export default Home
